<template>
	<view class="submitStyle" @touchmove.stop="" v-if="orderInfo.order.mn"
		:style="{'padding-bottom':paddingBottom + 5 + 'px'}">

		<image class='bg-image' src="../static/unpaid.png" alt="" />
		<!-- <title :center="true" title="待支付" bgcolor="transparent" iconSize="38" @toclick="toBack(1)" icon='icon'>
		</title> -->

		<title :center="true" title="待支付" iconSize="38" :bgcolor="titleSty.bgColor" :color="titleSty.color"
			@toclick="toBack(1)" :icon="titleSty.icon"></title>

		<view class="m20 confirm" :style="{'margin-top': height * 1.5 + 100 + 'rpx'}">
			<view class="count-down flex-center align-center">
				<image src="../static/clock.png" alt="" />
				<div class='f24' style='color:rgba(46, 46, 46, 1)'>等待您的付款 <u-count-down :timestamp="timestamp"
						font-size="24" color="rgba(46, 46, 46, 1)" :show-days="false" :show-hours="false"
						@end="timeOutEnd">
					</u-count-down> 后订单自动关闭</div>
			</view>

			<view class="confirmtop mt30">
				
				<view class="con flex-start ">
					<image :src="orderInfo.order.img" mode=""></image>
					<view class="">
						<view class="flex-between align-center">
							<text class="f36 fontw no-warp-one" style="color: rgba(46, 46, 46, 1);">{{orderInfo.order.mn}}</text>
							<text class="f22" style="color: rgba(102, 102, 102, 1);min-width: fit-content;">共{{orderInfo.order.count}}张</text>
						</view>
						<view class="twoline flex-start align-center medium" style="color: #222222;">
							<text>{{orderInfo.order.show_time || ''| getWeekByDay}}</text>
							<text>{{orderInfo.order.show_time || '' | formateDate('MM-DD')}}</text>
							<text>
								{{orderInfo.order.show_time || '' | formateDate('HH:mm')}}~{{orderInfo.order.show_time || '' | endTime(orderInfo.order.dur)}}
							</text>
							<text v-if="orderInfo.order.tp">{{orderInfo.order.tp}}</text>
						</view>
						<view class="flex-start align-center">
							<image class="mr10" src="../static/location.png" style='width: 24rpx;height: 24rpx;' alt="" />
							<div style='color:#666666;' class='f24'>
								<text class="mr10 ">{{orderInfo.order.cname}}</text>
								<text>{{orderInfo.order.cn}}</text>
							</div>
						</view>
						<view >
							<text class="mr10"> {{orderInfo.order.hn}}</text>
							{{ orderInfo.order.seat | shufilter(',', ' ', true)}}
						</view>
					</view>
				</view>

				<view class="info flex-start align-center">
					<view class="flex-start align-center">
						<image src="../static/forbid.png" alt="">
							<text style="margin-left: 11rpx;">不可退票</text>
					</view>
					<view class="flex-start align-center" style="margin-left: 50rpx;">
						<image src="../static/forbid.png" alt="">
							<text style="margin-left: 11rpx;">不可改签</text>
					</view>
					<view class="flex-start align-center" style="margin-left: 50rpx;">
						<image src="../static/ok.png" mode=""></image>
						<text style="margin-left: 11rpx;">{{orderInfo.order.ischange === 1 ? '可调座' : '不可调座'}}</text>
					</view>
				</view>
			</view>
			<!-- 头部 end -->
		</view>

		<!-- 电影票信息 start -->
		<view class="movieinfo m20 f28">
			<view class="youhui ">
				<view >手机号</view>
				<view style="color: rgba(46, 46, 46, 1);">{{orderInfo.userinfo.tel }}</view>
			</view>

			<view class="youhui">
				<view class="flex-between align-center mb20">
					<text class="quan">影票原价：</text>
					<text style="color: rgba(46, 46, 46, 1);">￥{{(orderInfo.order.original_price * orderInfo.order.count) | toFixed(2)}}
					</text>
				</view>
				<!-- <view v-if="coupon.item.id" class="flex-between align-center mb20"> -->
				<!-- <view v-if="coupon.item.length > 0" class="flex-between align-center mb20">
					<text >优惠券抵扣：</text>
					<text class="youcolor">-￥{{(orderInfo.order.original_price * coupon.item.length) | toFixed(2)}}</text>
				</view> -->
				
				<view class="flex-between align-center mb20">
					<text >特惠购票：</text>
					<text class="youcolor">-￥{{discount | toFixed(2)}}</text>
				</view>
				<view class="flex-end align-center ">
					<text >实付款：</text>
					<!-- <text class=" shicolor f32 fontw" style="color: rgba(46, 46, 46, 1);" v-if="coupon.item.id">￥0</text>
					<text class=" shicolor f32 fontw" style="color: rgba(46, 46, 46, 1);"
						v-else>￥{{(orderInfo.order.price * (orderInfo.order.count - orderInfo.order.coupon)) | toFixed(2)}}
					</text> -->
					<text class=" shicolor f32 fontw" style="color: rgba(46, 46, 46, 1);">￥{{(orderInfo.order.price * (orderInfo.order.count - coupon.item.length)) | toFixed(2)}}
					</text>
				</view>
			</view>
		</view>
		<!-- 电影票信息 end -->

	<!-- 	<view class="card-coupon m20 ">
			<view class="p20 flex-between align-center" style="border-bottom: 2rpx solid rgba(244, 244, 244, 1);">
				<text class="f28" style="color: rgba(86, 85, 101, 0.8);">优惠卷</text>
				<view class="f24 flex-statr align-center" style="color: rgba(46, 46, 46, 1)"
					@click="coupon.show = true">
					<text> <text v-if="coupon.item.id">-</text> {{coupon.text}}</text>
					<text class="iconfont icongengduo f18 ml10"></text>
				</view>
			</view>
			<view class="p20 flex-between align-center">
				<text class="f28" style="color:rgba(86, 85, 101, 0.8)">电影卡</text>
				<view class="f24 flex-statr align-center" style="color:rgba(46, 46, 46, 1)"
					@click="cardShow = true">
					<text>立即添加</text>
					<text class="iconfont icongengduo f18 ml10"></text>
				</view>
			</view>
		</view> -->

		<!-- 购票须知 start -->
		<view class="buyticket m20">
			<view class="title flex-between align-center">
				<text class="fontw f28">使用须知</text>
				<view class="choiceBox">
					<u-checkbox class="" v-model="refundModal.checked" active-color="#f1255d" shape="circle"
						@change="chooseAgree"></u-checkbox>
					<view v-if="refundModal.checked == false">未读</view>
					<view v-else>
						已读
					</view>
				</view>
			</view>

			<view class="popup-desc-box">
				<view class="desc-title">1.根据中国电影发行放映协会要求，观影前需实名登记观众信息，未戴口罩和体温37.3度以上者不得进入。</view>
				<view class="desc-title" style="color: red;">2.请确认场次和时间无误,购票成功后不可退票、不可改签。</view>
				<view class="desc-title">3.付款成功后，预计在10-60分钟内出票，出票失败全额退款。</view>
				<view class="desc-title">4.取票码查看方式：点击“我的-电影票”即可查看取票码，凭二维码或取票码至影城取票机即可取票。</view>
				<view class="desc-title" style="color: red;">5.如遇影城设备故障等不可抗力导致影片无法正常播放，会退票退款</view>
			</view>
		</view>
		<!-- 购票须知 end -->

		<!-- 底部提交订单 start -->
		<view class="order_botm">
			<view class="buke" @click="priceClick" v-if="!option.pay">
				<view class="">
					<view class="fen">
						<text>￥{{orderInfo.order.price * orderInfo.order.count | toFixed(2) }}元</text>
						<view v-if="priceModal.show == false" class="iconfont iconlong-arrow-top  arr"></view>
						<view v-else class="iconfont iconarrowdown arr"></view>
					</view>
					<view>电影票不支持退票、改签</view>
				</view>
			</view>
			<view class="tijiaoorder" v-if="!option.pay">
				<button class="tijiaoorder" @click="getPayParams">确认付款</button>
			</view>

			<view class="tijiaoorder two-btn" v-else>
				<!-- <button class="tijiaoorder" @click="setCancel">取消订单</button> -->
				<button class="tijiaoorder" @click="getPayParams">确认支付</button>
			</view>
		</view>
		<!-- 底部提交订单 end -->



		<!-- 价格明细弹出 start -->
		<u-popup v-model="priceModal.show" closeable mode="bottom">
			<view class="popup-model-box">
				<view class="popup-title">价格明细</view>
				<view class="popup-content">
					<view class="popup-desc-box">
						<view class="desc-content" style="font-size: 28rpx;">电影票 {{orderInfo.order.count}}张</view>
						<view class="desc-content" style="font-size: 28rpx;">
							<view>原价</view>
							<view class="desc-title">
								{{(orderInfo.order.original_price * orderInfo.order.count) | toFixed(2)}}元
							</view>
						</view>
						<view class="desc-content" style="font-size: 28rpx;">
							<text>优惠活动</text>
							<view class="desc-title">-{{discount | toFixed(2)}}元</view>
						</view>
					</view>
					<view class="popup-bottom-switch" style="opacity: 0;">
						<view>我已阅读并同意</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 价格明细弹出 end -->

		<!-- 购票须知弹框 start -->
		<notice-popup v-model="noticeShow" @confirm="refundClick"></notice-popup>
		<!-- 购票须知弹框 end -->
		
		<!-- 支付 start -->
		<alipay-popup v-model="alipayShow" @confirm="checkOrderStatus" :data="aliurl"></alipay-popup>
		<!-- 支付 end -->

	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import noticePopup from '../components/NoticePopup.vue'
	import alipayPopup from '../components/AlipayPopup.vue'
	export default {
		data() {
			return {
				paddingBottom: 0,
				titleSty: {
					bgColor: 'none',
					color: '#000',
					icon: 'icon',
				},
				coupon: {
					updata: true,
					show: false,
					item: [],
					text: '无可用'
				},
				aliurl:'',
				cardShow: false,
				noticeShow: false,
				alipayShow:false,
				height: 0,
				option: {},
				// 备选座位开关
				isChange: false,
				// 订单信息
				orderInfo: {
					order: {},
					userinfo: {}
				},
				// 不退退票弹出
				refundModal: {
					show: false,
					checked: false
				},
				// 价格明细弹出
				priceModal: {
					show: false,
				},
				// 橘票儿
				temId: [
					"usNp6aOm_5z3N62kJtvv7gviqPp7u6nH6LDyXKC6sKw", //电影出票成功通知
					"MgiJUHjJpXiFmnl4Ga3ZMFeZhuRGAcau1P-EBxWmNAE", //电影出票失败通知
					"5aE3Tib_4EwUujb-McpWoOP6n6W2Vd7cpJv0hxKA278" //订单状态通知
				],
				phone: "",
			}
		},
		computed: {
			discount() {
				if(this.coupon.item.length > 0){
					if (this.orderInfo.order.original_price) {
						return (this.orderInfo.order.original_price * (this.orderInfo.order.count - this.coupon.item.length)) - (this.orderInfo.order
							.price * (this.orderInfo.order.count - this.coupon.item.length))
					}
				}else{
					if (this.orderInfo.order.original_price) {
						return (this.orderInfo.order.original_price * this.orderInfo.order.count) - (this.orderInfo.order
							.price * this.orderInfo.order.count)
					}
				}
				return 0
			},
			timestamp() {
				let time = this.$options.filters['getExtendTime'](
					this.orderInfo.order.created_at,
					10,
					'm',
					'YYYY-MM-DD HH:mm:ss'
				)
				let temp = this.$options.filters['getTimestamp'](time)
				let now = this.$options.filters['getTimestamp'](new Date())
				return (temp - now) / 1000
			},
		},
		components: {
			title,
			noticePopup,
			alipayPopup
		},
		onLoad(option) {
			this.option = option
			this.option['pay'] = 1
			console.log('this.option', this.option)
			this.getSubmitOrder()
		},

		onPageScroll(e) {
			if (e.scrollTop > 30) {
				this.titleSty.bgColor = 'white'
			} else {
				this.titleSty.bgColor = 'none'

			}
		},
		onShow() {
			this.coupon.updata = false
			this.$nextTick(() => {
				this.coupon.updata = true
			})
			
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight()
				
				setTimeout(()=>{
					const query = uni.createSelectorQuery().in(this);
					query.select('.order_botm').boundingClientRect(data => {
						this.paddingBottom = data.height
					}).exec();
				},1000)
			})
			
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		
		onUnload() {
			if (this.option.back) {
				this.$common.toBack(1)
			}
		},

		methods: {
			couponSetText(val) {
				this.coupon.text = val
			},
			couponSetItem(val) {
				this.coupon.item = val
			},

			// 手机号输入框的focus
			inpFocus(e) {
				this.phone = ""
			},
			//手机输入框失去焦点
			inpBlur(e) {
				// console.log(e)
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
				} else {
					// 必须是1开头，第二位数字可以是0-9任意一个，总长为11
					// let reg = /^1([0-9])\d{9}$/;
					// 必须是1开头，第二位数字可以是3|5|6|7|8|9任意一个，总长为11
					let reg = /^1([3|5|6|7|8|9])\d{9}$/;
					// console.log(/^1(3|4|5|7|8)\d{9}$/.test(this.phone))
					if (!reg.test(this.phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						})
					}
					return
				}
			},
			// 返回
			async toBack() {
				let isPay = await this.getIsPayByOid()
				if (isPay) {
					uni.showModal({
						title: '温馨提醒',
						content: '订单取消后,已选座位将不会保留',
						cancelText: '确认取消',
						cancelColor: '#424242',
						confirmText: '继续支付',
						confirmColor: '#F2304E',
						success: (res) => {
							if (res.cancel) {
								this.releaseOrder(true)
							} else {
								this.getPayParams()
							}
						}
					})
				} else {
					this.$common.toBack(1)
				}
			},
			// 不可退票弹框
			refundClick() {
				this.refundModal.checked = true
				this.getPayParams()
			},
			// 价格明细弹框
			priceClick() {
				this.refundModal.show = false
				this.priceModal.show = !this.priceModal.show
			},
			// switch改变
			changeChoose() {
				let _this = this
				if (this.isChange) {
					uni.showModal({
						title: "是否接受备选座位？",
						content: "接受备选座位，当您的所选位置锁座失败时系统会为您购买符合您选座偏好的最佳观影位置",
						showCancel: !0,
						cancelColor: "#999",
						confirmColor: "#F1255D",
						cancelText: "暂不需要",
						confirmText: "接受备选",
						success: function(res) {
							res.cancel ? _this.setIsChange() : ''
						},
					})
				} else {
					this.setIsChange()
				}
			},
			// 获取提交所需的订单信息
			getSubmitOrder() {
				this.$api.getSubmitOrder(this.option).then(res => {
					this.orderInfo = res.data.data
					console.log('this.orderInfo', this.orderInfo)
					this.phone = this.orderInfo.userinfo.tel
					this.isChange = this.orderInfo.order.ischange == 1 ? true : false
					let coupon = []
					if(this.orderInfo.order.coupon!==''){
						coupon = this.orderInfo.order.coupon.split(',')
					}
					this.coupon.item = coupon
					// 微信插件支付args的fee
					// this.args.fee = (this.orderInfo.order.price * this.orderInfo.order.count * 100).toFixed(2)
					uni.hideLoading()
				})
			},
			// 座位设置备选
			setIsChange() {
				uni.showLoading({
					title: '设置中'
				})
				this.$api.setIsChange({
					val: !this.isChange,
					oid: this.option.oid
				}).then(res => {
					this.isChange = !this.isChange
					uni.hideLoading()
				}).catch(() => {})
			},
			// 倒计时结束
			async timeOutEnd() {
				if (!await this.getIsPayByOid()) {
					this.$common.toBack(1)
				} else {
					let _this = this
					uni.showModal({
						title: "超时提醒",
						content: "因长时间未支付,订单已超时",
						showCancel: false,
						confirmColor: "#F1255D",
						confirmText: "我知道了",
						success: function() {
							_this.releaseOrder()
						}
					});
				}
			},
			// 设置取消订单
			async setCancel() {
				if (!await this.getIsPayByOid()) {
					this.$common.toBack(1)
				} else {
					let _this = this
					uni.showModal({
						title: "温馨提醒",
						content: "订单取消后,已选座位将不会保留",
						cancelColor: "#999",
						confirmColor: "#F1255D",
						cancelText: "确认取消",
						confirmText: "继续支付",
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
							} else if (res.cancel) {
								_this.releaseOrder(true)
							}
						},
					})
				}
			},
			// 获取订单是否支付
			async getIsPayByOid() {
				let res = await this.$api.getIsPayByOid({
					id: this.orderInfo.order.id
				})
				if (res.data.data.is_pay == 0) {
					return true
				} else {
					return false
				}
			},
			// 取消订单
			releaseOrder(status) {
				if (status) {
					uni.showLoading({
						title: "取消中"
					})
				}
				this.$api.releaseOrder({
					oid: this.option.oid
				}).then(res => {
					uni.hideLoading()
					this.$common.toBack(1)
				}).catch(err => {
					console.log(err)
					this.$common.toBack(1)
				})
			},

			couponPay() {
				let data = {
					'orderno': this.orderInfo.order.orderno,
					'coupon': this.orderInfo.order.coupon
				}
				
				let _this = this
				this.$api.usedCoupon(data).then(res => {
					uni.requestSubscribeMessage({
						tmplIds: this.temId,
						complete: function() {
							_this.$api.getPayParams({
								id: _this.option.oid
							}).then(res => {
								let data = res.data.data
								data.provider = 'wxpay'
								_this.$common.requestPayment(data, (result) => {
									uni.navigateTo({
										url: `/subpages/orderDetail/order-detail?no=${_this.orderInfo.order.orderno}`
									})
								}, (error) => {
									uni.showToast({
										icon: 'none',
										title: '取消支付'
									})
								})
							}).catch((err) => {
								console.log(err)
							})
						},
						fail: function(e) {
							console.log(e)
						}
					})
				}).catch(err => {
					console.log('err', err)
				})
			},
			// 唤起支付
			getPayParams() {
				if (!this.refundModal.checked) {
					this.noticeShow = true
					//this.alipayShow = true
					return false
				}

				// if (this.coupon.item.length > 0 && this.orderInfo.order.coupon === '') {
				// 	this.couponPay()
				// 	return
				// }

				let _this = this
				uni.requestSubscribeMessage({
					tmplIds: this.temId,
					complete: function() {
						_this.$api.getPayParams({
							id: _this.option.oid
						}).then(res => {
							let data = res.data.data
							this.aliurl = data.payData;
							console.log('aliurl---')
							console.log(this.aliurl)
							this.alipayShow = true
							/*data.provider = 'wxpay'
							_this.$common.requestPayment(data, (result) => {
								uni.navigateTo({
									url: `/subpages/orderDetail/order-detail?no=${_this.orderInfo.order.orderno}`
								})
							}, (error) => {
								uni.showToast({
									icon: 'none',
									title: '取消支付'
								})
							})*/
						}).catch((err) => {
							console.log(err)
						})
					},
					fail: function(e) {
						console.log(e)
					}
				})
			},
			//点击已阅读
			chooseAgree() {
				this.refundModal.show = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.count-down {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.arr {
		color: #D9D9D9;
		margin-left: 10rpx;
	}

	// 确认订单头部
	.submitStyle {
		background-color: rgba(221, 221, 221, 0.25);
		min-height: 100vh;
		overflow-y: auto;
		
		.bg-image {
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.cus-title {
			position: relative;

			>.iconfont {
				position: absolute;
				left: 0;
				min-width: 40rpx;
				height: 40rpx;
			}
		}

		.ticket-type {
			width: 124rpx;
			height: 40rpx;
			border-radius: 10000px;
			background-color: white;
			color: rgba(239, 51, 114, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			margin-left: 20rpx;
		}

		// 购票须知
		.buyticket {
			margin-top: 15rpx;
			background-color: #FFFFFF;

			.title {
				padding: 20rpx 20rpx;
				border-bottom: 2rpx solid #F2F2F2;
				color: rgba(34, 34, 34, 1);

				.choiceBox {
					display: flex;
					justify-content: center;
					align-items: center;

					.line-red-new {
						color: #f1255d;
					}

					/deep/.u-checkbox {
						display: block !important;
						margin-right: 6rpx;

					}

					/deep/.u-checkbox__icon-wrap__icon {
						height: 34rpx;
						line-height: 34rpx;

						.u-icon {
							vertical-align: top;

							.u-icon__icon {
								line-height: 34rpx;
							}
						}
					}
				}
			}

			.popup-desc-box {
				padding: 10rpx 20rpx;
				
				.desc-title {
					font-size: 26rpx;
					color: #AAAAAA;
					line-height: 48rpx;
				}

			}
		}

		.confirm {
			position: relative;
			z-index: 2;

			/deep/.u-countdown {
				.u-countdown-item {
					background-color: unset !important;
				}
			}

			.confirmtop {
				background-color: #fff;
				border-radius: 8rpx;
				// box-shadow: 0px -2px 8px 1px rgba(221, 221, 221, 0.3);

				>view {
					padding: 26rpx 20rpx;
				}

				.con {
					// box-shadow: 0px -4rpx 16rpx 2rpx rgba(221, 221, 221, 0.3);
					border-bottom: 2rpx solid rgba(232, 234, 238, 0.7);

					>image {
						width: 140rpx;
						height: 210rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
					}

					>view {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						flex: 1;

						>view {
							margin-bottom: 10rpx;
						}

						.twoline {
							text {
								margin-right: 8rpx;

								&:last-of-type {
									display: inline-block;
									background-color: #ECF6F3;
									color: #138E64;
									font-size: 22rpx;
									padding: 3rpx 8rpx;
									border-radius: 6rpx;
								}
							}
						}

					}
				}

				.info {
					image {
						width: 26rpx;
						height: 26rpx;
					}
				}
			}
		}


		// 头部end
		// 影票信息开始
		.movieinfo {
			background-color: #fff;

			.youhui {
				padding: 24rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #F4F4F4;
				font-size: 30rpx;
				color:rgba(86, 85, 101, 0.8) ;
				
				&:last-child{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					>view{
						width: 100%;
					}
				}

				.youcolor {
					color:rgba(255, 67, 69, 1);
				}

				.shicolor {
					color: rgba(46, 46, 46, 1);
				}
			}

			.jieshou {
				display: flex;
				min-height: 100rpx;
				padding: 0 30rpx;
				align-items: center;
				color: #aaa;
				font-size: 26rpx;
			}
		}

		.card-coupon {
			background: #FFFFFF;
		}

		// 影票信息结束
		// 提交底部开始
		.order_botm {
			width: 100%;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 0 30rpx;
			z-index: 999;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, .1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			// .order_botm_top {
			// 	display: flex;
			// 	padding: 20rpx 0;
			// }

			.tijiaoorder {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;

				button {
					width: 375rpx;
					background-image: linear-gradient(45deg, #f43f3b, #ec008c);
					border-radius: 999rpx;
					color: #fff;
					font-size: 32rpx;
					height: 80rpx;

					&::after {
						border: 0;
					}
				}
			}

			.two-btn {
				width: 100vw;
				display: flex;
				justify-content: flex-end !important;

				button {
					margin: 0;
					width: 228rpx;
					height: 64rpx;
					color: white;
					background-image: none;
					background-color: rgba(255, 67, 69, 1);
 
					&:nth-of-type(1) {
						border: 2rpx solid rgba(221, 221, 221, 1);
						color: rgba(102, 102, 102, 1);
						background-color: #fff;
						margin-right: 32rpx;
					}
				}
			}

			.buke {
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.fen {
					color: #f1255d;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.icon--arrow-bottom {
						color: #aaa;
						font-size: 25rpx;
						margin-left: 10rpx;
					}

					.icon--arrow-top {
						color: #aaa;
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}
			}

			// .icon--arrow-bottom {
			// 	color: #aaa;
			// 	font-size: 22rpx;
			// 	margin-left: 10rpx;
			// }
		}
	}


	/deep/.u-switch--disabled {
		opacity: 1 !important;
	}

	.popup-model-box {
		.popup-title {
			padding: 20rpx 0;
			font-size: 36rpx;
			color: #333;
			text-align: center;
		}

		.popup-content {
			padding: 30rpx 40rpx;
			padding-bottom: 200rpx;
			color: #666;

			.popup-desc-box {
				>view {
					margin-top: 10rpx;
				}

				.desc-title {
					font-size: 24rpx;
					color: rgba(86, 85, 101, 0.8);
					line-height: 36rpx;
				}

				.desc-content {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.popup-bottom-switch {
				margin-top: 140rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.switch {
					display: flex;
					align-items: center;

					/deep/.u-checkbox {
						display: block !important;
						margin-right: 20rpx;

					}

					/deep/.u-checkbox__icon-wrap__icon {
						height: 34rpx;
						line-height: 34rpx;

						.u-icon {
							vertical-align: top;

							.u-icon__icon {
								line-height: 34rpx;
							}
						}
					}
				}

				.line-red-new {
					color: #f1255d;
				}
			}
		}
	}

	.beixuan {
		margin: 0 !important;
		padding: 0 30rpx;
		border-top: 14rpx solid #F9F9F9;
	}

	// 微信查价确认支付的覆盖层
	.cover {
		position: absolute;
		width: 100%;
		height: 100%;
		// background-color: black;
		z-index: 999;
	}

	.two {
		width: 50%;
		right: 0;
	}
</style>
